<template>
  <section class="card-box card-three">
      <div class="card-header">
        <CardTitle :title="'今日新闻'" @showCalendar="setOpenPicker"></CardTitle>
      </div>

       <div class="card-content">
          <div class="txt-wrapper" v-for="it,i in new Array(10)" :key="i">
            <h3>跟着总书记走好生态致富路</h3>
            <p>收录时间一般也就是几分钟的事情，但也有例外哦最好半小时到一小时查看。</p>
            <section class="txt-subtxt">
              <span class="labels-txt">
                <i>党代会</i>
                <i>涉疫</i>
              </span>
              <span class="star-box">
                <Star :activeNum="3"></Star>
              </span>
            </section>
            <section class="txt-info">
              <span class="info-source">独创深圳-广州频道</span>
              <span class="info-time">2021-08-15 10:09</span>
            </section>
          </div>
       </div>

       <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker"></mt-datetime-picker>

       <!-- <div class="card-footer">
         <CardFooter></CardFooter>
       </div> -->

  </section>
</template>

<script>
import CardTitle from '@/components/card-title/index.vue'
import CardFooter from '@/components/card-foot/index.vue'
import Star from '@/components/star-box/index.vue'

export default {
  name:'card-three',
  data(){
    return {
      pickerValue: new Date(),
    }
  },
  created(){

  },  
  methods:{
    handleConfirm(v){
      console.log(v)
    },
    setOpenPicker(){
      
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
       if(this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal').length > 0){
         this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal')[0].style.display = 'none';
         window.clearInterval(t);
       }
      },30);
    }
  },
  computed:{

  },
  components:{
    CardTitle,
    CardFooter,
    Star
  }
}
</script>

<style scoped lang="scss">
  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:calc(100% - 100px);margin-top:10px;background-color:#fff;position:relative;overflow-x:hidden;overflow-y:auto;
      .txt-wrapper{
        width:calc(100% - 32px);height:150px;margin:0 auto;margin-bottom:30px;box-shadow:0 2px 6px #ddd;border-radius:3px;box-sizing:border-box;padding:0 20px;
        h3{margin:0;font-size:13px;height:45px;line-height:45px;font-weight:600;}
        p{margin:0;font-size:15px;width:100%;height:23px;line-height:23px;color:#ccc;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        /* txt-subtxt */
        .txt-subtxt{
          width:100%;margin-top:25px;display:flex;flex-wrap:nowrap;justify-content: space-between;height:25px;line-height:25px;
          .labels-txt{
            i{
              display: inline-block;font-size:12px;font-style: normal;box-sizing:border-box;height:25px;padding:0px 8px;border:1px solid #e7e7e7;border-radius:5px;color:#bbb;background-color:#fafafa;margin-left:8px;
              &:first-of-type{ margin-left:0; }
            }
          }
        }
        /* txt-info */
        .txt-info{
          width:100%;height:22px;line-height:22px;font-size:13px;display: flex;flex-wrap: nowrap;justify-content: flex-end;
          .info-source{ color:#8a8a8a; margin-right:12px;}
          .info-time{ color:#cacaca; }
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:66px;position:absolute;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }
  }
</style>